<template>
  <a-modal
    class="add-org-dialog"
    title="查找素材"
    width="1200px"
    style="top: 20px"
    @ok="handleOk"
    @cancel="cancel"
  >
    <CommonQueryLayout>
      <template #top>
        <QueryForm
          size="small"
          :span="4"
          :form="queryFormBind"
          :form-item-list="queryMaterialFormItems"
          :loading="queryMatLoading"
          @query="searchMatList"
        />
      </template>
      <template #default>
        <SimpleMatList
          :dataSource="matList"
          v-model:violationIds="selectIds"
          :loading="queryMatLoading"
          :span="4"
        />
        <a-pagination
          size="small"
          :current="pageInfo.current"
          :page-size="pageInfo.pageSize"
          :total="pageInfo.total"
          @change="pageChange"
          show-quick-jumper
        />
      </template>
    </CommonQueryLayout>
  </a-modal>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { QueryMaterialRequest } from '@/api/premium/content/model/materialModel'
import {
  MaterialStatus,
  MaterialType,
  MaterialItem,
} from '@/components/ItemList/MaterialList/types'
import { queryMaterialFormItems } from '@/views/premium/content/imageControl/hooks/initData'
import { FormProps } from '@/components/Form/types'
import { SMatDiaForm } from './types'

import CommonQueryLayout from '@/layout/CommonQueryLayout.vue'
import { QueryForm } from '@/components/Form'
import { SimpleMatList } from '@/components/ItemList'
import { Pagination } from '#/antd'

const props = withDefaults(
  defineProps<{
    /** 素材列表数据 */
    matList: MaterialItem[]
    /** 素材列表分页 */
    pageInfo: Pagination
    /** 查询素材列表的loading状态 */
    queryMatLoading?: boolean
  }>(),
  {
    queryMatLoading: false,
  }
)

const emits = defineEmits<{
  /**
   * 确认选择素材
   *
   * 传出选择的素材id列表和选择的素材项列表
   */
  (e: 'enter', materialIds: string[], materialItems: MaterialItem[]): void
  /**
   * 搜索素材列表回调函数
   *
   * 传出搜索条件
   */
  (e: 'getMatList', formState: SMatDiaForm, pageInfo: Pagination): void
}>()

const selectIds = ref<Set<string>>(new Set([]))
const queryFormState = reactive<Omit<QueryMaterialRequest, 'current' | 'size'>>(
  {
    id: undefined,
    sourceId: undefined,
    type: MaterialType.IMAGE,
    structure: -1,
    authorId: undefined,
    status: MaterialStatus.NORMAL,
    atlas: undefined,
    category: undefined,
    tag: undefined,
    title: undefined,
    itype: -1,
    source: -1,
  }
)
const queryFormBind: FormProps = {
  model: queryFormState,
}

const handleOk = () => {
  const selectMatIds = Array.from(selectIds.value)
  const selectMat = props.matList.filter((mat) => selectMatIds.includes(mat.id))
  selectIds.value = new Set<string>()
  emits('enter', selectMatIds, selectMat)
}

const searchMatList = () => {
  emits('getMatList', queryFormState, { ...props.pageInfo, current: 1 })
}

const pageChange = (current: number, pageSize: number) => {
  emits('getMatList', queryFormState, {
    pageSize,
    current,
    total: props.pageInfo.total,
  })
}

const cancel = () => {
  selectIds.value = new Set<string>()
  console.log('弹框退出')
}
</script>

<style lang="scss" scoped>
@include b(add-org-dialog) {
}
</style>
<style lang="scss">
.add-org-dialog {
  .ant-modal-body {
    background: #eee;
    padding: 12px;
    .common-query-layout__top {
      padding-top: 12px;
      padding-bottom: 12px;
    }
  }
}
</style>
